<template>
<div class="back-home-box" :class="{'default':defaultClass,'firstactive':firstClass,'unactive':timerCtrCls,'active':isActive}" @click.stop.prevent="backHome()">
  <div class="back-home" :class="{'backpadding':iconMove==1,'unbackpadding':iconMove==2}">
    <span class="back" :class="{'backopacity':iconMove==1,'unbackopacity':iconMove==2}">返回首页</span>
    <i class="iconfont icon-jiantou" :class="{'rotate':iconMove==1,'unrotate':iconMove==2}"></i>  
  </div>
</div>
</template>
<script>
export default {
  name:'backHome',
  data() {
    return {
      isActive:false,  
      timer:null,    
      defaultClass:true,//默认样式
      firstClass:false,//第一次访问动画
      timerCtrCls:false,//定时返回动画
      iconMove:0,//箭头动画
      backopacity:0//文字动画
    }
  },
  mounted() {
    /**
     *用户第一次进入，完全展示返回按钮，10s后收回，之后进入不完全展示
     * 
     */

    this.isActive = false;
    let firstShowBack = localStorage.getItem("firstShowBack");
    if(!firstShowBack){
      setTimeout(() => {
        this.firstClass = true;
        this.defaultClass = false;
        this.iconMove = 1;
        localStorage.setItem("firstShowBack","firstShowBack")
        let timer = setTimeout(() => {
          this.firstClass = false;
          this.defaultClass = true;
          this.iconMove = 2;
          console.log("10s")
          clearTimeout(timer);
        }, 10500);
      }, 1000);
    }
  },
  methods: {
    backHome(){
      if(this.isActive){
        this.isActive = false;
        clearTimeout(this.timer);
        this.timer = null;
        this.$router.replace('/dynamics');
        return ;
      }
      this.iconMove = 1;
      this.isActive = true;
      this.timerCtrCls = false;
      this.timer = setTimeout(() => {
        this.isActive = false;
        this.timerCtrCls = true;
        this.iconMove = 2;
        clearTimeout(this.timer);
        this.timer = null;
      }, 5000);

    }  
  }
}
</script>
<style lang="less" scoped>
@keyframes move {
  0%{
    transform: translateX(-22px);
  }
  100%{
    transform: translateX(0);
  }
}
@keyframes unmove {
  0%{
    transform: translateX(0px)
  }
  100%{
    transform: translateX(-22px);
  }
}
@keyframes rotate {
  0%{
    transform: rotate(0deg);
  
  }
  100%{
    transform: rotate(-180deg);
    margin-left: 10px;
  }
}
@keyframes unrotate {
  0%{
    transform: rotate(-180deg);
    margin-left: 10px;
  }
  100%{
    transform: rotate(0deg);
    margin-left: 0px;
    margin-right: 12px;
  }
}
//back
@keyframes backpadding {
  0%{
    padding-left: 4px;
  }
  100%{
    padding-left: 9px;
  }
}
@keyframes unbackpadding {
  0%{
    padding-left: 9px;
  }
  100%{
    padding-left: 4px;
  }
}
//icon
@keyframes opacity {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
@keyframes unopacity {
  0%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}
.back-home-box{
  width: 70px;
  position: fixed;
  left: 0;
  bottom: 95px;
  padding-right: 10px;
  z-index: 100;
  &.default{
    transform: translateX(-22px);
  }
  &.active{
    animation: move 0.3s linear 0s both;
  }
  &.firstactive{
    animation: unmove 0.3s linear 10s both;
  }
  &.unactive{
    animation: unmove 0.3s linear 0s both;
  }

}
.back-home{  
  display: flex;
  align-items: center;
  width: 60px;
  height: 50px;
  border-radius: 0 25px 25px 0;
  background: rgba(0, 122, 230, 0.9);
  padding-left: 4px;
  color: #fff;
  box-shadow: 0px 2px 4px 0px rgba(19, 40, 77, 0.3);
  box-sizing: border-box;
  &.backpadding{
    animation: backpadding 0.3s linear 0s both;
  }
  &.unbackpadding{
    animation: unbackpadding 0.3s linear 0s both;
  }
  .back{
    display: inline-block;
    width: 25px;
    font-size: 12px;
    line-height: 16px;
    font-weight: bold;
    opacity: 0;
    &.backopacity{
      animation: opacity 0.2s linear 0s both;
    }
    &.unbackopacity{
      animation: unopacity 0.2s linear 0s both;
    }
  }
  >i{
    font-size: 16px;
    color: #fff;
    &.rotate{
      animation: rotate 0.3s linear 0s both;
    }
    &.unrotate{
      animation: unrotate 0.3s linear 0s both;
    }
  }
}
</style>
